<template>
  <div class="container">
    <el-form :model="form" class="form">
      <div class="form_box">
        <el-form-item class="account" label="企业名称">
          <el-input v-model="form.name" placeholder="请输入企业名称"></el-input>
        </el-form-item>
      </div>
      <el-form-item class="btn_box">
        <el-button type="primary" @click="search">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="auth_box">
      <el-button @click="delAllFiles" type="primary">删除</el-button>
      <el-button @click="auditFiles" type="primary">审核</el-button>
    </div>
    <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" align="center"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="企业名称" width="300" show-overflow-tooltip></el-table-column>
      <el-table-column label="审核状态" prop="auditStatusText" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="上传类型" prop="typeText"></el-table-column>
      <el-table-column label="上传时间" prop="createTime" show-overflow-tooltip></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="preview(scope.row)" type="text" size="small">预览</el-button>
          <el-button type="text" size="small" @click="delFile(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="form.page" :page-sizes="[10,30,60,100,200,300]" :page-size="form.size"
        layout="prev, pager, next, jumper, sizes, total" :total="total"></el-pagination>
    </div>
    <el-dialog title="批量审核" :visible.sync="dialogVisible" width="30%" class="audit" :before-close="auditClose">
      <el-form :model="audit" ref="audit" :rules="rules" label-width="100px">
        <el-form-item label="审核结果：" prop="auditStatus">
          <el-radio-group v-model="audit.auditStatus">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">不通过</el-radio>
            <el-radio :label="1">待定</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核不通过原因：" v-if="audit.auditStatus===3" prop="auditCause">
          <el-input type="textarea" v-model="audit.auditCause"></el-input>
        </el-form-item>
        <el-form-item class="mid_box">
          <el-button @click="auditClose">取 消</el-button>
          <el-button type="primary" @click="onSubmit">确 定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <viewer :images="temImg" v-show="false">
      <img :src="temImg[0]" width="1" id="img">
    </viewer>
    <el-dialog title="企业风采" :visible.sync="videoVisible" width="60%" :before-close="handleClose" class="video">
      <!-- <preVideo :src='src'></preVideo> -->
      <video :src="src" controls autoplay></video>
    </el-dialog>
  </div>

</template>

<script>
import { companyList, companyInfo, deleteFile, deleteAllFiles, fileAudit } from '../../../../api/corporateStyle'
// import preVideo from '../../../common/video'
export default {
  name: 'corporateStyle',
  data () {
    return {
      dialogVisible: false,
      videoVisible: false,
      form: {
        page: 1,
        size: 10,
        name: ''
      },
      audit: {
        auditStatus: '',
        auditCause: ''
      },
      total: 0,
      tableData: [],
      selection: [],
      temImg: [],
      src: '',
      rules: {
        auditStatus: [{ required: true, message: '请选择审核结果', trigger: 'change' }],
        auditCause: [
          { max: 100, message: '原因不能超过100个字' },
          { required: true, message: '请填写审核不通过原因', trigger: 'change' }
        ],
      }
    }
  },
  created () {
    this.getList()
  },
  // components: {
  //   preVideo
  // },
  methods: {
    // 获取列表
    getList () {
      companyList(this.form).then(res => {
        if (res.success) {
          this.tableData = res.data.records || [];
          this.total = res.data.total;
          console.log(this.tableData);
        } else {
          this.$message.error(`${res.msg}`)
        }
      })
    },
    //  重置
    reset () {
      this.form.name = '';
      this.getList();
    },
    // 查询
    search () {
      this.form.page = 1;
      this.form.size = 10;
      this.getList();
    },
    // 批量删除
    delAllFiles () {
      if (this.selection.length < 1) {
        this.$message.error('请选择想要删除的图片或视频!');
      } else {
        this.$confirm('您要删除图片或视频，删除后不可恢复，是否确定操作？', '信息提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          callback: action => {
            if (action === 'confirm') {
              let query = this.selection.map(item => item.id)
              deleteAllFiles(query).then(data => {
                console.log(data);
                if (data.success) {
                  this.$message.success('删除成功');
                  this.getList();
                } else {
                  this.$message.error(`${data.msg}`);
                }
              });
            }
          }
        });
      }
    },
    // 单个删除
    delFile (row) {
      this.$confirm('您要删除图片或视频，删除后不可恢复，是否确定操作？', '信息提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: action => {
          if (action === 'confirm') {
            let formData = new FormData();
            formData.append('id', row.id)
            deleteFile(formData).then(data => {
              console.log(data);
              if (data.success) {
                this.$message.success('删除成功');
                this.getList();
              } else {
                this.$message.error(`${data.msg}`);
              }
            });
          }
        }
      });
    },
    // 批量审核
    auditFiles () {
      if (this.selection.length < 1) {
        this.$message.error('请选择想要审核的图片或视频!');
      } else {
        this.dialogVisible = true;
      }
    },
    auditClose () {
      this.$refs.audit.resetFields();
      this.dialogVisible = false;
    },
    handleSelectionChange (selected) {
      this.selection = selected;
    },
    // 预览
    preview (row) {
      if (row.type === 1) {
        this.temImg = [];
        this.temImg.push(row.filePath)
        document.getElementById("img").click();
      } else {
        this.src = row.filePath
        this.videoVisible = true;
      }
    },
    handleClose () {
      this.videoVisible = false;
      this.src = '';
    },
    handleSizeChange (val) {
      this.form.size = val;
      this.getList();
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange (val) {
      this.form.page = val;
      this.getList();
      console.log(`当前页: ${val}`);
    },
    // 审核完成
    onSubmit () {
      this.$refs.audit.validate(valid => {
        if (valid) {
          let query = {
            auditCause: this.audit.auditCause,
            auditStatus: this.audit.auditStatus,
          }
          query.ids = this.selection.map(item => item.id).join(',');
          console.log(this.audit);
          fileAudit(query).then(data => {
            console.log(data);
            if (data.success) {
              this.$message.success(`审批完成`);
              this.getList();
            } else {
              this.$message.error(`${data.msg}`);
            }
            this.$refs.audit.resetFields();
            this.dialogVisible = false;
          });
        }
      });
    },
  }
}
</script>

<style lang="css" scoped>
.el-form .el-form-item /deep/ .el-form-item__error {
    left: 150px;
}
.el-form {
    display: flex;
    align-items: center;
}
.form .el-form-item {
    width: 300px;
    display: inline-block;
    margin-left: 20px;
}
.el-input {
    width: 200px;
}
.el-form .account {
    width: 350px;
}
.el-form .btn_box {
    width: 200px;
}
.el-form .btn_box .el-button {
    width: 85px;
}
.el-table {
    height: 82%;
}
.el-table /deep/ td,
.el-table /deep/ th {
    text-align: center;
}
.audit .el-form .el-form-item /deep/ .el-form-item__error {
    left: 150px;
}
.el-dialog .el-form {
    display: block;
}
.el-dialog .el-form .el-form-item {
    display: block;
    margin-bottom: 20px;
}
.el-dialog .el-form /deep/ .el-form-item__label {
    width: 150px;
}
.el-dialog .el-form /deep/ .el-textarea {
    position: unset;
    /* width: 300px; */
    height: 100px;
}
.el-dialog .el-form /deep/ .el-textarea textarea {
    /* width: 300px; */
    height: 100px;
}
.el-dialog .el-form /deep/ .el-button {
    width: 100px;
    margin-right: 20px;
}
.el-dialog .mid_box {
    text-align: center;
}
.video /deep/ .el-dialog__body {
    background: #000;
    height: 600px;
}
.video .el-dialog .el-dialog__body video {
    width: 100%;
    height: 100%;
}
.auth_box {
    margin-bottom: 20px;
    text-align: right;
}
.auth_box .el-button {
    width: 100px;
}
.page {
    width: 100%;
    height: 40px;
    background: #ffffff;
    text-align: center;
    padding-top: 20px;
}
</style>